<template>
  <view style="margin:40rpx 20rpx 20rpx 20rpx;background: #fff;position: relative">
    <view class="tabs-box">
      <view class="tab-item" @click="changeTab(0)" :class="{'active':currentTab === 0}">我的菜单</view>
      <view class="tab-item" @click="changeTab(1)" :class="{'active':currentTab === 1}">我的分享</view>
    </view>
    <view class="slider" :style="{transform:`translateX(${currentTab * 100}%)`}"></view>
  </view>
  <view style="margin: 20rpx">
    <view class="p-20" style="background: #fff;border-radius: 10rpx">
      <view class="flex">
        <up-avatar
            text="北"
            fontSize="20"
            size="35"
            randomBgColor
        ></up-avatar>
        <view style="margin-left: 20rpx">
          <view>我的私房菜</view>
          <view class="u-f-sm f-c-9">2024-09-12 18:30</view>
        </view>
        <view style="margin-left: auto;" class="flex">
          <up-icon name="trash-fill" size="20" color="#ff6d70"></up-icon>
          <up-icon name="edit-pen" size="20" color="#ff6d70" style="margin-left: 20rpx"></up-icon>
        </view>
      </view>
      <view class="text-1 m-t-20">
          今天分享一道家常红烧肉的做法，肥而不腻，入口即化
      </view>
      <view style="display: grid;gap: 20rpx" class="m-t-20" :style="{gridTemplateColumns:`repeat(${2},1fr)`}">
        <image src="/static/img/avatar/4.png" style="width: 100%;height: 300rpx;border-radius: 10rpx"></image>
        <image src="/static/img/avatar/4.png" style="width: 100%;height: 300rpx;border-radius: 10rpx"></image>
      </view>
      <view class="flex-between m-t-30">
        <view class="flex">
          <up-icon name="heart-fill" size="20" color="#ff6d70"></up-icon>
          点赞
        </view>
        <view class="flex">
          <up-icon name="star-fill" size="20" color="#ff6d70"></up-icon>
          收藏
        </view>
        <view class="flex">
          <up-icon name="share-fill" size="20" color="#ff6d70"></up-icon>
          分享
        </view>
      </view>
    </view>
  </view>
  <a-float-menu/>
</template>

<script setup lang="ts">
import {ref, reactive} from 'vue';

const currentTab = ref(0)


const changeTab = (index: number) => {
  currentTab.value = index
}
</script>

<style scoped lang="scss">
@import "@/static/css/index.css";

.tabs-box {
  position: relative;
  display: flex;
  border-radius: 10rpx;

  .tab-item {
    text-align: center;
    padding: 25rpx 0;
    width: 50%;
    transition: color 0.3s;
    position: relative;
  }

  .active {
    color: #ff6d70;
    transition: color 0.3s;
    border: none;
  }
}
.slider {
  position: absolute;
  bottom: 0;
  width: 50%;
  left: 0;
  height: 3rpx;
  background: #ff6d70;
  z-index: 10;
  transition: transform 0.3s;
}
</style>
